<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透笔度个人原创游戏</title>
<style>
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
ul{ list-style:none;}
body{ color:#222121; font-size:12px; font-family:"宋体"; background-color:#fefefe}

.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.wrapper{margin:0 auto;width:1000px;}
/*===================css==========================*/
.gametitle{height: 50px;line-height: 50px;font-size: 13px;}
.gametitle strong{margin: 0 20px;font-size: 16px;}
.gametitle span{font-size: 13px;}
.game{background: #ccc; position: relative;}
.game .drag1{cursor:move;float:left;}
.box{width: 500px;position: relative; margin: 0 0 0 290px;}
.gameshow{width: 200px;position: absolute;;top: 50px;right: -220px;}
#gamenext{}
#gamereset{}
.gameshow li{height: 26px;line-height: 26px;}
.gamelistt{border-top:1px dotted #aaa;}
.gameall{width: 280px;position: absolute;;top: 50px;left: -280px;}
.gamelisttt{border-left:1px dotted #aaa;}
.gamelisttt li{line-height: 26px;}
</style>
</head>
<body>
          <!-- game -->
          <div class="box">
            <div class="gametitle"><strong></strong>剩余时间：<span></span></div>
            <div class="boxgame"></div>  
            <div class="gameshow">  
              <p><input class="btn btn-default"  type="button" value="下一关" id="gamenext"></p>              
              <p><input class="btn btn-default"  type="button" value="上一关" id="gameprev"></p> 
              <p><input class="btn btn-default"  type="button" value="重新开始" id="gamereset"></p>
              
              <ul class="gamelist gamelistt">
                <li><strong>共4关,当前记录</strong></li>
                <li>第1关：<i>未通过</i> 用时：<span>xx分xx秒</span></li>
                <li>第2关：<i>未通过</i> 用时：<span>xx分xx秒</span></li>
                <li>第3关：<i>未通过</i> 用时：<span>xx分xx秒</span></li>
                <li>第4关：<i>未通过</i> 用时：<span>xx分xx秒</span></li>
              </ul>
       
            </div> 
          </div>
          <!-- game --> 
<footer>@透笔度游戏</footer>

</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//s=vt+1/2*a*t2
//Math.pow(4,2);
//x=a*Math.cos(wt*t+w);
$(function(){
	function Game(noval,code,wh,url){
	  //obj class  
	  //this.root=og;
	  this.root=$('<div class="game game'+noval+'"></div>');
	  $(".boxgame").append(this.root);
	  this.root.css('width',wh);
	  this.root.css('height',wh);  
	  this.code=code;    
	  this.wh=wh/this.code;
	  this.list=[];
	  this.templist=[]; 
	  this.init=function(){     
		for (var i = 0; i < this.code*this.code; i++) {       
		  this.temp.push(i);
		}; 
		for (var i = 0; i < this.code*this.code; i++) {
		  this.radf(); 
		};
		var poval=this.posi();
		for (var i = 0; i < this.code*this.code; i++) {
		  var spl=$('<div class="drag1" sort="'+this.rad[i]+'"></div>');
		  spl.css('background-image',"url("+url+")"); 
		  spl.css('background-position',poval[this.rad[i]].x+'px '+poval[this.rad[i]].y+'px');  
		  spl.css('width',this.wh);
		  spl.css('height',this.wh);  
		  this.list.push({obj:spl,cx:-poval[i].x+this.wh/2,cy:-poval[i].y+this.wh/2});
		  this.templist.push({obj:spl,cx:-poval[i].x+this.wh/2,cy:-poval[i].y+this.wh/2});
		  this.root.append(spl);
		};        
	  };
	  this.rad=[];
	  this.temp=[];
	  this.posi=function(){
		var arrposi=[];
		for (var i = 0; i < this.code; i++) {
		  for (var j = 0; j < this.code; j++) {
			var bx=-this.wh*j;
			var by=-this.wh*i;   
			arrposi.push({x:bx,y:by});               
		  };        
		}; 
		return arrposi;  
	  };
	   this.radf=function(){
		  if(this.temp.length>0){
			  var radd=Math.floor(Math.random()*this.temp.length);           
			  this.rad.push(this.temp[radd]);
			  this.temp.splice(radd,1);           
		  };       
	   };
	   this.opc=function(){
		var mx=this.xmdrag+this.wh/2;
		var my=this.ymdrag+this.wh/2; 
		var ii=0;
		for (var j = 0; j < this.list.length; j++) {
			if(this.list[j].obj.attr('sort')==this.objdown.attr('sort')){            
				ii=j;
			};
		}; 
		for (var i = 0; i < this.list.length; i++) {
			  if(Math.abs(mx-this.list[i].cx)<this.wh/2){
				if(Math.abs(my-this.list[i].cy)<this.wh/2){
				  if(i!=ii){
					$(".drag1[sort='"+this.list[i].obj.attr('sort')+"']").css('opacity',0.5).siblings().css('opacity',1);                
				  }else{
					$(".drag1").css('opacity',1);
				  };                
				};
			  };
		  }; 
	   };
  
	   this.check=function(){
		var mx=this.xmdrag+this.wh/2;
		var my=this.ymdrag+this.wh/2;
		var ii=0;
		for (var j = 0; j < this.list.length; j++) {
			if(this.list[j].obj.attr('sort')==this.objdown.attr('sort')){            
				ii=j;
			};
		};  
		for (var i = 0; i < this.list.length; i++) {
			  if(Math.abs(mx-this.list[i].cx)<this.wh/2){
				if(Math.abs(my-this.list[i].cy)<this.wh/2){
				  if(i!=ii){    
					var temp=this.templist[i];
					this.list[ii].obj=temp.obj;
					this.objdown.css('visibility','visible');
					this.list[i].obj=this.objdown; 
  
				  }else{
					this.objdown.css('visibility','visible');
				  };                
				};
			  };
		  };  
		 this.refresh();
	  };
	  this.refresh=function(){
		 this.templist=[];       
		 this.root.children().remove();
		 for (var i = 0; i < this.list.length; i++) {
		   this.root.append(this.list[i].obj);
		   this.templist[i]=this.list[i];
		 }
  
	   }
	   this.isdrag=false;
	   this.xcdrag=0;
	   this.ycdrag=0;
	   this.rxcdrag=this.root.offset().left;
	   this.rycdrag=this.root.offset().top; 
	   this.objmove;
	   this.objdown;
	   this.xmdrag=0;
	   this.ymdrag=0;
	   this.xddrag=0;
	   this.yddrag=0;
	   //result=[];
	   this.result=[];
	};
	//function face
	function game(noval,code,wh,url,argtime){
	  //new
	  var game1=new Game(noval,code,wh,url);
	  game1.init();
	  //time
	  timeshow=argtime;
	  var hh=Math.floor(argtime/60);
	  var ii=argtime%60;
	  $(".gametitle").children("span").text(hh+"分"+ii+"秒");
	  $(".gametitle").children("strong").text("急速拼图第"+noval+"关");    
	  stime=setInterval(ytime,1000);  
	  //event
	  game1.root.on('mousedown',function(event){
		  game1.objdown=$(event.target);
		  if(game1.objdown.is(".drag1")){    
			game1.xddrag=$(event.target).position().left+game1.wh/2;
			game1.yddrag=$(event.target).position().top+game1.wh/2;      
			game1.objdown.css('visibility','hidden');
			game1.objmove=game1.objdown.clone(true);
			game1.root.append(game1.objmove);
			game1.objmove.css('visibility','visible');
			game1.objmove.css('position','absolute');
			game1.objmove.css('z-index',2);
			game1.objmove.addClass('move');
			game1.xcdrag=event.pageX-game1.objdown.offset().left;
			game1.ycdrag=event.pageY-game1.objdown.offset().top;   
			game1.objmove.css('left',event.pageX-game1.rxcdrag-game1.xcdrag);
			game1.objmove.css('top',event.pageY-game1.rycdrag-game1.ycdrag);
			game1.isdrag=true;
		  }else{
			game1.isdrag=false;
		  };
		  
	  });
	  $(document).on('mousemove',function(event){
		  if(game1.isdrag){
			game1.xmdrag=event.pageX-game1.rxcdrag-game1.xcdrag;
			game1.ymdrag=event.pageY-game1.rycdrag-game1.ycdrag;
			game1.objmove.css('left',event.pageX-game1.rxcdrag-game1.xcdrag);
			game1.objmove.css('top',event.pageY-game1.rycdrag-game1.ycdrag);
			game1.opc(); 
		  }else{
			game1.isdrag=false;
		  };
	  });
	  $(document).on('mouseup',function(event){
		  if(game1.isdrag){
			game1.xmdrag=event.pageX-game1.rxcdrag-game1.xcdrag;
			game1.ymdrag=event.pageY-game1.rycdrag-game1.ycdrag; 
			game1.objmove.css('left',event.pageX-game1.rxcdrag-game1.xcdrag);
			game1.objmove.css('top',event.pageY-game1.rycdrag-game1.ycdrag);    
			game1.check();        
			game1.objdown.css('visibility','visible');   
			$(".drag1").css('opacity',1);
			game1.isdrag=false; 
			game1.root.children().each(function(i,ele){
				game1.result[i]=$(ele).attr("sort");
			});
			if(success(game1.result)){//gamesuccess
				hansuccess();
			}else{};
		  };
	  });
  
	};
	//other
	var stime=null,timeshow=0; 
	function ytime(){
		  timeshow-=1;
		  if(timeshow<=0){
			  clearInterval(stime);
			  hanfaile();
			  $(".gametitle").children("span").text("00分00秒");
		  }else{
			  var h=Math.floor(timeshow/60);
			  var i=timeshow%60;
			  $(".gametitle").children("span").text(h+"分"+i+"秒");
		  }
  
	};
	function success(res){
	  var re=true;
	  if(res.length<=0){
		re=false;
	  }else{
		
		for (var i = res.length-1; i > 0 ; i--) {
			if((res[i]-res[i-1])!=1){
			  re=false;
			}
		}
	  };
  
	  return re;
	};
	function clear(){
	  $(".boxgame").children().remove();
	  clearInterval(stime);
	  stime=null;
	  timeshow=0;
	};
	var arrdata=[
	  {noval:1,code:3,wh:450,url:"images/pintu1.jpg",argtime:1*30},
	  {noval:2,code:4,wh:480,url:"images/pintu2.jpg",argtime:2*60},
	  {noval:3,code:5,wh:500,url:"images/pintu3.jpg",argtime:3*60},
	  {noval:4,code:6,wh:480,url:"images/pintu4.jpg",argtime:4*60}
	];
	var currrent=1;//当前关卡
	function hansuccess(){
	  var res=confirm("第"+currrent+"关卡已经通过，是否更新记录？")
	  if(res){
		var cha=arrdata[currrent-1].argtime-timeshow;//剩余秒数，成功确认后
		var h=Math.floor(cha/60);
		var i=cha%60;
		$(".gamelist").children().eq(currrent).children("i").text("通过").siblings("span").text(h+"分"+i+"秒");
		clear(); 
		if(currrent>=arrdata.length){     
		  currrent=1;
		  game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
		}else{
		  currrent+=1;
		  game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
		};
	  }else{
		clear();      
		game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	  }
	};
	function hanfaile(){
	  clear(); 
	  game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	};
	//handle
	game(arrdata[0].noval,arrdata[0].code,arrdata[0].wh,arrdata[0].url,arrdata[0].argtime);
	$("#gamereset").click(function(){
	  clear(); 
	  game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	});
	$("#gamenext").click(function(){
	  clear(); 
	  if(currrent>=arrdata.length){     
		currrent=1;
		game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	  }else{
		currrent+=1;
		game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	  };
	});
	$("#gameprev").click(function(){
	  clear(); 
	  if(currrent<=1){     
		currrent=arrdata.length;
		game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	  }else{
		currrent-=1;
		game(arrdata[currrent-1].noval,arrdata[currrent-1].code,arrdata[currrent-1].wh,arrdata[currrent-1].url,arrdata[currrent-1].argtime);
	  };
	});
	//end	
		
});
</script>
</html>